<!-- 头部 -->
<template>
  <div class="leftTopBox-map flex fd-column ">
    <h2 class="policeTitle u-m-b-10"><span>今日各年级未处理报警统计</span></h2>
    <div class="region-echarts"  style="width:100%;height:100%;overflow:hidden;" >
        <Echart
        id="leftBottom"
        :options="regionOptions"
        class="left_bottom_inner"
        v-if="pageflag"
        ref="charts"
      />
    </div>  
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
import * as echarts from "echarts";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
    dataVal:{
      type:  [Array,Object],
      default:()=>{
        return []
      }
    }
  },
  watch:{
    dataVal:{
      handler:function(val){
        if(val){
          this.getData(val)
        }
      },
      deep:true,
      immediate:true
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 数值
    };
  },

  mounted() {
    
  },
  methods: {
    
    getData(res) {
      let titleData= res.map(iv=>iv.title)
     
      
      if (res.length > 0) {
        const newData = [];
        res.forEach((iv) => {
          const obj = {
            name: iv.title,
            value: iv.untreated_count,
          };
          newData.push(obj);
        });
        this.init(newData,titleData);
        this.pageflag = true;
      }
    },
    init(newData,titleData) {
      // 区域分布
      this.regionOptions = {
        animation: true,
        grid:{
          left:40,
          right:20,
          bottom:30,
          top:30,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let data = params[0]
             return `
                ${data.name}
                <div class="flex align-center">
                  <p style="width:8px;height:8px;background:#19AAF8;border-radius:50%;"></p>
                  <p class="u-m-l-4">${data.seriesName} <span class="u-m-l-10">${data.value}条</span></p>
                </div>
              `
          }
        },
        xAxis: {
          type: "category",
          
          axisLabel: {
            color: "#ccc",
          },
          data: titleData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ccc",
            formatter: function (value) {
              return value + '条';
            }
          }
        },
        series: [
          {
            name: "未处理报警数",
            type: "bar",
            data: newData,
            barWidth: 16,
            z: 10,
            zlevel: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(29,225,232, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(24,153,251, 1)"
                  }
                ])
              }
            },
          },{
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F"
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [18, 4],
            symbolPosition: "start",
            symbolOffset: [1,1],
            data: newData,
            width: 2,
            z: 0,
            zlevel: 1
          }
        ],
      };
    },


  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.leftTopBox-map {
  width: 100%;
  height: 100%;
  .boxline{
    height: 100%;
  }
}
#leftBottom{
  width: 100%;
  height: 100%;
}
</style>
